<template>
<div>
  <div :style="{opacity}">欢迎学习Vue</div>
  <ul>
    <li>新闻001 <input type="text"></li>
    <li>新闻002 <input type="text"></li>
    <li>新闻003 <input type="text"></li>
  </ul>
</div>
</template>

<script>
    export default {
        name: "HomeNews",
      data(){
          return{
            opacity: 1
          }
      },
      activated() {
        console.log("News组件被激活了")
        this.timer=setInterval(()=>{
          console.log("@")
         this.opacity-=0.01
          if(this.opacity<0) this.opacity=1

        },16)
      },
      deactivated() {
        console.log("News组件失活了")
        clearInterval(this.timer)
      }
    }
</script>

<style scoped>

</style>
